<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <p>用户名</p>
                    <p class="bind_comon1">{{currentUser.username}}</p>
                    <p class="bind_comon2">
                        <el-button type="primary"
                                   style="width: 200px"
                                   @click="dialogUserNameFormVisible = true">修改</el-button>
                    </p>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <p>密码</p>
                    <p class="bind_comon1">保密</p>
                    <p class="bind_comon2">
                        <el-button type="primary"
                                   style="width: 200px"
                                   @click="dialogPasswordFormVisible = true">修改</el-button>
                    </p>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <p>手机号</p>
                    <p class="bind_comon1">{{currentUser.mobile}}</p>
                    <p class="bind_comon2">
                        <el-button type="primary"
                                   style="width: 200px"
                                   @click="dialogMobileFormVisible=true"
                        >修改</el-button>
                    </p>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <p>邮箱</p>
                    <p class="bind_comon1">{{currentUser.email}}</p>
                    <p class="bind_comon2">
                        <el-button type="primary"
                                   style="width: 200px"
                                    @click="dialogEmailFormVisible = true">
                            修改
                        </el-button>
                    </p>
                </div>
            </el-col>
        </el-row>
        <!--emailForm-->
        <el-dialog title="修改邮箱" :visible.sync="dialogEmailFormVisible">
            <el-form :model="updateForm">
                <el-form-item label="原邮箱: " :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="currentUser.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新邮箱: " :label-width="formLabelWidth">
                    <el-input v-model="updateForm.email" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEmailFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitCurUserInfo()">确 定</el-button>
            </div>
        </el-dialog>
        <!--MobileForm-->
        <el-dialog title="修改手机" :visible.sync="dialogMobileFormVisible">
            <el-form :model="updateForm">
                <el-form-item label="原手机号: " :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="currentUser.mobile" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新手机号: " :label-width="formLabelWidth">
                    <el-input v-model="updateForm.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogMobileFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitCurUserInfo()">确 定</el-button>
            </div>
        </el-dialog>
        <!--PasswordForm-->
        <el-dialog title="修改密码" :visible.sync="dialogPasswordFormVisible">
            <el-form :model="updateForm">
                <el-form-item label="原密码: " :label-width="formLabelWidth" >
                    <el-input type="password" v-model="updateForm.oldPassword" autocomplete="off" placeholder="请输入原密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码: " :label-width="formLabelWidth">
                    <el-input type="password" v-model="updateForm.password" autocomplete="off" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="重复密码: " :label-width="formLabelWidth">
                    <el-input type="password" v-model="updateForm.rePassword" autocomplete="off" placeholder="请再次输入密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogPasswordFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitCurUserInfo()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- UserNameForm -->
        <el-dialog title="修改用户名" :visible.sync="dialogUserNameFormVisible">
            <el-form :model="updateForm">
                <el-form-item label="原用户名：" :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="currentUser.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新用户名: " :label-width="formLabelWidth">
                    <el-input v-model="updateForm.username" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUserNameFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitCurUserInfo()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import user from "@/api/user";

    export default {
        inject:['reload'],
        name: "company-user-info",

        data(){
            return{
                /*弹出框*/
                dialogEmailFormVisible:false,
                dialogUserNameFormVisible:false,
                dialogPasswordFormVisible:false,
                dialogMobileFormVisible:false,

                /*当前的用户*/
                currentUser:{},

                /*修改以后要提交的信息*/
                updateForm:{
                    username:undefined,
                    password:undefined,
                    oldPassword: undefined,
                    rePassword: undefined,
                    mobile:undefined,
                    email:undefined
                },



                formLabelWidth: '120px'
            }
        },
        created() {
        },
        mounted() {
            this.loadingCurrentUser()
        },
        computed:{

        },
        methods:{
            /*加载当前用户*/
            loadingCurrentUser(){
                const userId = JSON.parse(localStorage.getItem('user')).userId
                user.getCurrentUserinfo(userId)
                .then(data => {
                    if (data.data.code === 0){
                        this.currentUser = data.data.data
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },

            /*提交修改的信息*/
            commitCurUserInfo(){

                /*console.log(" this.updateForm.oldPassword!=undefined?? ",this.updateForm.oldPassword)
                  console.log(" this.updateForm.oldPassword!=undefined?? ",this.updateForm.password)
                  console.log(" this.updateForm.oldPassword!=undefined?? ",this.updateForm.rePassword)*/

                const userId = JSON.parse(localStorage.getItem('user')).userId
                user.updateClientUserCountInfo(userId,this.updateForm)
                    .then(data => {
                        if (data.data.code === 0){
                            this.$message({
                                type:'success',
                                message:data.data.msg
                            })
                            this.updateForm.username = undefined
                            this.updateForm.password = undefined
                            this.updateForm.oldPassword = undefined
                            this.updateForm.rePassword = undefined
                            this.updateForm.mobile = undefined
                            this.updateForm.email = undefined

                            this.reload()
                        }else if (data.data.code === 500){
                            this.$message({
                                type:'warning',
                                message:data.data.msg
                            })
                            this.updateForm.username = undefined
                            this.updateForm.password = undefined
                            this.updateForm.oldPassword = undefined
                            this.updateForm.rePassword = undefined
                            this.updateForm.mobile = undefined
                            this.updateForm.email = undefined
                            this.reload()
                        }
                    })
                    .catch(err => {
                        this.dialogUserNameFormVisible = false
                        this.dialogPasswordFormVisible = false
                        this.dialogMobileFormVisible = false
                        this.dialogEmailFormVisible = false
                        Promise.reject(err)
                    })
                }
        },
    }
</script>

<style scoped>


    .el-row {
        height: 60px;
        line-height: 60px;
        margin-top: 50px;
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #FCFCFC;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        position: relative;
        padding:0px 100px 0px 100px;
        border-radius: 4px;
        min-height: 40px;
        line-height: 1;
    }

    .grid-content p{
        display: inline-block;
    }

    .grid-content .bind_comon1{
        position: absolute;
        top:0px;
        left:550px;
    }
    .grid-content .bind_comon2{
        position: absolute;
        top:0px;
        left:1000px;
    }
</style>
